<template>
  <div class="qualityMonitoringAbnormal">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="温度计所属区域">
          <el-select
            v-model="formInline.area_id"
            filterable
            placeholder="请选择运单出发区域"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in websiteList"
              :key="index"
              :value="item.id + ''"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="温度计编号">
                    <el-input v-model="formInline.thermometer_no" placeholder="温度计编号"></el-input>
                </el-form-item> -->
        <!-- <el-form-item label="异常原因">
                    <el-input v-model="formInline.waybill_from_area_id" placeholder="异常原因"></el-input> 
                </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="thermometermonitorObj()"
            >查询</el-button
          >
          <el-button type="primary" @click="replacement()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :span-method="objectSpanMethod"
        :max-height="maxheight"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="area_name" label="温度计所属区域" width="180">
        </el-table-column>
        <el-table-column prop="area_cnt" label="自有总数量" width="180">
          <template slot-scope="scope">
            <el-tag size="medium" @click="redirect(scope.row, 'area_cnt')">
              {{ scope.row.area_cnt }}</el-tag
            >
            <!-- <div v-if="scope.row.area_id*1 != 0">
                            <el-tag size="medium"  @click="redirect(scope.row,'area_cnt')">
                                {{scope.row.area_cnt}}</el-tag>
                        </div>
                        <div v-else>
                            <el-tag size="medium">
                                {{scope.row.area_cnt}}</el-tag>
                        </div> -->
          </template>
        </el-table-column>
        <el-table-column prop="in_transit_cnt" label="自有在途数量" width="180">
          <template slot-scope="scope">
            <el-tag
              size="medium"
              type="success"
              @click="redirect(scope.row, 'in_transit_cnt')"
            >
              {{ scope.row.in_transit_cnt }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="abnormal_cnt" label="自有异常数量" width="180">
          <template slot-scope="scope">
            <el-tag
              size="medium"
              type="danger"
              @click="redirect(scope.row, 'abnormal_cnt')"
            >
              {{ scope.row.abnormal_cnt }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="normal_cnt" label="自有正常数量" width="180">
          <template slot-scope="scope">
            <el-tag
              size="medium"
              type="warning"
              @click="redirect(scope.row, 'normal_cnt')"
            >
              {{ scope.row.normal_cnt }}</el-tag
            >
          </template>
        </el-table-column>
        <!-- <el-table-column prop="rental_cnt" label="租赁数量" width="180">
                    <template slot-scope="scope">
                        <div v-if="scope.row.area_id*1 != 0">
                            <el-tag size="medium" type="info" @click="redirect(scope.row,'rental_cnt')">
                                {{scope.row.rental_cnt}}</el-tag>
                        </div>
                        <div v-else>
                            <el-tag size="medium" type="info">
                                {{scope.row.rental_cnt}}</el-tag>
                        </div>
                    </template>
                </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>
<script>
import {
  branchList,
  thermometermonitorreport,
} from "@/api/Largewidthmeterlist";
export default {
  name: "qualityMonitoringAbnormal",
  data() {
    return {
      formInline: {
        area_id: "", //温度计所属区域
        thermometer_no: "", //温度计编号
        abnormal_reason: "", //异常原因
      },
      tableData: [],
      maxheight: "auto",
      websiteList: [],
    };
  },
  mounted() {
    this.getWebsiteList();
    this.thermometermonitorObj();
  },

  methods: {
    async getWebsiteList() {
      let result = await branchList({ branch_type: "3", is_head: "1" });
      this.websiteList = result.data;
    },
    thermometermonitorObj() {
      var param = {
        ...this.formInline,
      };
      thermometermonitorreport(param).then((res) => {
        if (res.code == 10000) {
          // this.tableData = res.data.data
          this.tableData = this.addAllRowField(res.data.data);
          if (this.tableData.length > 6) {
            //一排操作栏
            this.maxheight = document.documentElement.clientHeight - 215;
          } else {
            this.maxheight = "auto";
          }
        }
      });
    },
    replacement() {
      Object.assign(this.$data.formInline, this.$options.data().formInline);
      this.thermometermonitorObj();
      this.currentPage4 = 1;
    },
    redirect(row, name) {
      if (name == "area_cnt") {
        this.$router.push({
          name: "qualityMonitoringList",
          query: {
            area_id: row.area_id != 0 ? row.area_id : "",
            usage_status: "",
            rental_cnt: "0",
          },
        });
      } else if (name == "in_transit_cnt") {
        this.$router.push({
          name: "qualityMonitoringList",
          query: {
            area_id: row.area_id != 0 ? row.area_id : "",
            usage_status: "1",
            rental_cnt: "0",
          },
        });
      } else if (name == "abnormal_cnt") {
        this.$router.push({
          name: "qualityMonitoringList",
          query: {
            area_id: row.area_id != 0 ? row.area_id : "",
            usage_status: "2",
            rental_cnt: "0",
          },
        });
      } else if (name == "normal_cnt") {
        this.$router.push({
          name: "qualityMonitoringList",
          query: {
            area_id: row.area_id != 0 ? row.area_id : "",
            usage_status: "0",
            rental_cnt: "0",
          },
        });
      } else if (name == "rental_cnt") {
        this.$router.push({
          name: "qualityMonitoringList",
          query: {
            area_id: row.area_id,
            usage_status: "",
            rental_cnt: "1",
          },
        });
      }
    },
    addAllRowField(data) {
      const idToFirstIndexMap = {};

      for (let i = 0; i < data.length; i++) {
        const areaId = data[i].area_id;
        if (idToFirstIndexMap[areaId] === undefined) {
          idToFirstIndexMap[areaId] = i;
        }
      }

      for (let i = 0; i < data.length; i++) {
        const areaId = data[i].area_id;
        if (i === idToFirstIndexMap[areaId]) {
          data[i].allrow = 1;
        } else {
          data[i].allrow = 0;
        }
      }
      return data;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 0) {
        if (row.allrow > 0) {
          // 判断当前列是否为第一列，即 area_id 列
          const currentAreaId = row.area_id;
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].area_id === currentAreaId) {
              rowspan++;
            } else {
              break;
            }
          }
          return { rowspan: rowspan, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
  },
};
</script>
<style scoped lang="less">
.qualityMonitoringAbnormal {
  width: 100%;
  background: #ffffff;
  padding: 10px 15px;
}
</style>